<template>
  <div :is="cardWrap ? 'el-card' : 'div'" class="table-search">
    <el-form
      ref="formRef"
      size="small"
      :inline="true"
      :model="formValue"
      class="demo-form-inline"
      v-bind="{ ...$attrs }"
    >
      <div class="form-container">
        <div class="form-row">
          <div class="form-row-left">
            <el-form-item
              v-for="searchFormItem in searchForm"
              :key="searchFormItem.label"
              :style="
                'margin-right:' + (searchFormItem.labelWidth ? 0 : '24px')
              "
              :label="searchFormItem.label"
              :prop="searchFormItem.key"
              :label-width="searchFormItem.labelWidth"
            >
              <el-input
                v-if="searchFormItem.type === 'input'"
                v-model="formValue[searchFormItem.key]"
                v-bind="{ ...inputAttrs, ...searchFormItem.otherAttrs }"
              />
              <el-select
                v-else-if="searchFormItem.type === 'select'"
                v-model="formValue[searchFormItem.key]"
                filterable
                v-bind="{ ...selectAttrs, ...searchFormItem.otherAttrs }"
                v-on="{ ...searchFormItem.slotListeners }"
              >
                <el-option
                  v-for="option in searchFormItem.options"
                  :key="option.key"
                  :label="option.value"
                  :value="option.key"
                />
              </el-select>
              <el-date-picker
                v-else-if="searchFormItem.type === 'date'"
                v-model="formValue[searchFormItem.key]"
                :type="(searchFormItem.otherAttrs || {}).type || 'date'"
                style="width: 100%;"
                :value-format="searchFormItem.valueFormat || 'yyyy-MM-dd'"
                v-bind="{ ...selectAttrs, ...searchFormItem.otherAttrs }"
              />

              <el-cascader
                v-else-if="searchFormItem.type === 'cascader'"
                v-model="formValue[searchFormItem.key]"
                :props="searchFormItem.props"
                v-bind="{ ...selectAttrs, ...searchFormItem.otherAttrs }"
                v-on="$listeners"
              />
            </el-form-item>
          </div>
          <div class="form-row-right">
            <el-form-item>
              <el-button type="primary" @click="handleSubmit">
                查询
              </el-button>

              <el-button v-if="!hideReset" @click="handleReset">
                重置
              </el-button>
            </el-form-item>
          </div>
        </div>
        <slot name="new-add-button" />
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    cardWrap: {
      type: Boolean,
      default: true
    },
    hideReset: {
      type: Boolean,
      default: false
    },
    searchForm: {
      type: Array,
      default: () => []
    },
    onSubmit: {
      type: Function,
      default: () => {}
    },
    onReset: {
      type: Function,
      default: () => {}
    }
    // formValue: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data() {
    return {
      formValue: {},
      inputAttrs: {
        style: {
          width: '160px'
        },
        placeholder: '请输入'
      },
      selectAttrs: {
        style: {
          width: '160px'
        },
        placeholder: '请选择'
      }
    }
  },
  watch: {
    searchForm: {
      handler() {
        console.log(this.$attrs)
      },
      immediate: true
    }
  },
  methods: {
    getFormRef() {
      return this.$refs.formRef
    },
    getFormData() {
      const data = this.formatFormData(this.$data.formValue)
      return data
    },
    initFormValue() {
      const formData = {}
      this.searchForm.forEach(item => {
        formData[item.key] = null
      })
      this.formValue = formData
    },
    formatFormData(_submitData) {
      const result = {}
      Object.keys(_submitData).forEach(e => {
        const currentRender = this.$props.searchForm.find(ee => ee.key === e)
        if (currentRender && currentRender.subKey) {
          currentRender.subKey.forEach((eee, iii) => {
            const currentSub = _submitData[e] || []
            result[eee] = currentSub[iii]
          })
        } else {
          result[e] = _submitData[e]
        }
      })
      return result
    },
    handleSubmit() {
      this.$refs.formRef.validate(success => {
        const data = this.formatFormData(this.$data.formValue)
        success && this.onSubmit && this.onSubmit(data)
      })
    },
    handleReset() {
      this.$refs.formRef.resetFields()
      this.initFormValue()
      this.onReset && this.onReset(this.formValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  display: flex;
}
.table-search {
  margin-bottom: 20px;

  .el-card__body {
    padding: 16px 24px;
  }

  .form-row {
    flex: 1;
    display: flex;
    // justify-content: space-between;

    .form-row-left {
      flex-wrap: wrap;
    }

    .form-row-right {
      width: 140px;
      text-align: right;
      white-space: nowrap;
    }
  }

  .el-form.el-form--inline .el-form-item {
    margin-top: 6px;
    margin-bottom: 6px;
  }
}
</style>
